<template>
  <div class="arrivalConfirm">
    <van-radio-group v-model="bookingType" @change="radioChange">
      <div class="bookingRadio f_14 tc_1 fw_700 bg_w border_r8 margin_b8 flex_c_sb_c" @click="changeRadio('oneself')">
        <div class="flex_r_sb_c" style="width: 100%; margin-bottom: 2.3rem">
          <div>本人预约</div>
          <van-radio name="oneself" icon-size="2.4rem" checked-color="#31A2A3"></van-radio>
        </div>
      </div>
      <div class="bookingRadio f_14 tc_1 fw_700 bg_w border_r8 flex_c_sb_c" @click="changeRadio('others')">
        <div class="flex_r_sb_c" style="width: 100%; margin-bottom: 2.3rem">
          <div>非本人预约</div>
          <van-radio name="others" icon-size="2.4rem" checked-color="#31A2A3"></van-radio>
        </div>
        <van-field v-if="bookingType === 'others'" class="othersInput f_14" v-model="arrivalCode" type="number" placeholder="请输入预约验证码" input-align="center" />
      </div>
    </van-radio-group>
    <div class="confirmText f_12 tc_8">
      <p>在预约时间的前5分钟会有专业人员接待，请耐心等待。</p>
      <p>若在专业人员未就位之前，有其它问题请和前台人员联系。</p>
    </div>
    <div class="footer bg_w">
      <van-button class="footerBtn bg_g tc_w f_16" color="#31A2A3" :disabled="btnDisable" :loading="btnDisable" round block type="info" @click="confirmArrival"> 确认到达 </van-button>
    </div>
  </div>
</template>

<script>
import {getVenuesId, removeVenuesId} from '@/utils/auth'
import user from '@/api/user'
export default {
  data() {
    return {
      bookingType: 'oneself',
      btnDisable: false,
      arrivalCode: ''
    }
  },
  methods: {
    changeRadio(val) {
      this.bookingType = val
    },
    radioChange(val) {
      console.log(val)
    },
    confirmArrival() {
      let _this = this
      if (this.bookingType === 'others' && this.$tools.isNullOrEmpty(this.arrivalCode)) {
        this.$dialog
          .alert({
            messageAlign: 'center',
            confirmButtonColor: '#31A2A3',
            message: '您当前选择的是非本人预约,\n 请填写预约验证码!'
          })
          .then(() => {})
          .catch(() => {})
        return
      }
      _this.btnDisable = true
      let data = {}
      data.venues_id = getVenuesId()
      if (this.bookingType === 'others') {
        data.code = this.arrivalCode
        user.confirmArriveNot(data).then((res) => {
          _this.btnDisable = false
          if (res.code !== 0) {
            removeVenuesId()
            this.$toast.success({
              message: '确认到达成功!',
              onClose: function () {
                _this.$router.replace({
                  path: '/index'
                })
              }
            })
          } else {
            this.$toast.fail(res.msg)
          }
        })
      } else {
        user.confirmArrive(data).then((res) => {
          _this.btnDisable = false
          if (res.code !== 0) {
            removeVenuesId()
            this.$toast.success({
              message: '确认到达成功!',
              onClose: function () {
                _this.$router.replace({
                  path: '/index'
                })
              }
            })
          } else {
            this.$toast.fail(res.msg)
          }
        })
      }

      // setTimeout(function () {
      //   _this.btnDisable = false
      // }, 3000)
    }
  },
  mounted() {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.arrivalConfirm {
  padding: 2rem 1.4rem;
  box-sizing: border-box;
  .bookingRadio {
    width: 100%;
    // height: 14rem;
    padding: 2.3rem 1.2rem 0;
    box-sizing: border-box;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
  }
}
.othersInput {
  background-color: #f5f5f5;
  border-radius: 0.4rem;
  min-height: 4.6rem;
  margin-bottom: 2rem;
}
.confirmText {
  margin-top: 3.6rem;
  p:nth-child(1) {
    margin-bottom: 0.6rem;
  }
}
.footer {
  width: 100%;
  height: 6rem;
  position: fixed;
  bottom: 0;
  left: 0;
  box-shadow: 0px -4px 8px rgba(204, 204, 204, 0.15);
  .footerBtn {
    width: 34.3rem;
    height: 4rem;
    line-height: 4rem;
    text-align: center;
    border-radius: 4rem;
    margin: 1rem auto;
  }
}
</style>
